<template>
  <div class="v-eqpt-list-view">
    <c-row-crumb :title="multLang('tab_asset_c')"> </c-row-crumb>
    <c-eqpt-list-view-head>
      <template #img>
        <c-row :col="6">
          <c-col center>
            <div class="v-eqpt-list-view-img">
              <c-img :src="eqptImg"></c-img>
              <c-upload-single @change="iconFormChange">
                {{ multLang('btn_upload_a') }}
              </c-upload-single>
            </div>
          </c-col>
          <c-col center>
            <div class="v-eqpt-list-view-img">
              <c-img :src="eqptQRcode"></c-img>
            </div>
          </c-col>
        </c-row>
      </template>
      <el-form
        :model="baseForm"
        :rules="baseRules"
        ref="baseForm"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_asset_a', ':')"
              prop="asset_name"
            >
              <c-form-edit :visible="baseEditVisible">
                <template #edit>
                  <el-input
                    v-model="baseForm.asset_name"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ baseForm.asset_name }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_asset_ae', ':')"
              prop="asset_code"
            >
              <c-form-edit :visible="baseEditVisible">
                <template #edit>
                  <el-input
                    v-model="baseForm.asset_code"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ baseForm.asset_code }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_status_a', ':')"
              prop="running_status_id"
            >
              <c-form-edit :visible="baseEditVisible">
                <template #edit>
                  <c-select
                    v-model="baseForm.running_status_id"
                    :options="assetStatusList"
                    :placeholder="tplLang('text_choose_a', ['title_status_a'])"
                  ></c-select>
                </template>
                <span>{{ assetStatusMap[baseForm.running_status_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_status_b', ':')"
              prop="status"
            >
              <c-form-edit :visible="baseEditVisible">
                <template #edit>
                  <c-select
                    v-model="baseForm.status"
                    :options="assetInfoStatusList"
                    :placeholder="tplLang('text_choose_a', ['title_status_b'])"
                  ></c-select>
                </template>
                <span>{{ assetInfoStatusMap[baseForm.status] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_status_c', ':')"
              prop="guarantee_status_id"
            >
              <c-form-edit :visible="baseEditVisible">
                <template #edit>
                  <c-select
                    v-model="baseForm.guarantee_status_id"
                    :options="warrantiesTypeList"
                    :placeholder="tplLang('text_choose_a', ['title_status_c'])"
                  ></c-select>
                </template>
                <span>{{
                  warrantiesTypeMap[baseForm.guarantee_status_id]
                }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
      <template #opn>
        <c-row-view-opn
          :auth="auth.isEdit"
          :visible="baseEditVisible"
          @update:visible="visibles.base = $event"
          @cancel="baseCancel"
          @save="baseSave"
        >
        </c-row-view-opn>
      </template>
    </c-eqpt-list-view-head>
    <c-eqpt-list-view-body>
      <c-tabs value="1" @click="tabClick">
        <el-tab-pane :label="multLang('tab_info_a')" name="1">
          <c-roll>
            <c-row-view :title="multLang('tab_info_a')">
              <template #opn>
                <c-row-view-opn
                  :auth="auth.isEdit"
                  :visible="infoEditVisible"
                  @update:visible="visibles.info = $event"
                  @cancel="infoCancel"
                  @save="infoSave"
                  @edit-click="getEqptModelList(infoForm.category_id)"
                >
                </c-row-view-opn>
              </template>
              <el-form
                :model="infoForm"
                :rules="infoRules"
                ref="infoForm"
                label-width="120px"
                :validate-on-rule-change="false"
              >
                <c-row :col="6">
                  <c-col>
                    <el-form-item
                      :label="multLang('title_asset_c', ':')"
                      prop="category_id"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <c-cascader
                            v-model="infoForm.category_id"
                            :options="assetTypeAllTree"
                            :placeholder="
                              tplLang('text_choose_a', ['title_asset_c'])
                            "
                            @change="changeAssetModelAllList"
                          ></c-cascader>
                        </template>
                        <span>{{ assetTypeAllMap[infoForm.category_id] }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_asset_d', ':')"
                      prop="asset_model_id"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <c-select
                            v-model="infoForm.asset_model_id"
                            :options="assetModelAllList"
                            :placeholder="
                              tplLang('text_choose_a', ['title_asset_d'])
                            "
                          ></c-select>
                        </template>
                        <span>
                          {{ assetModelAllMap[infoForm.asset_model_id] }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_loca_a', ':')"
                      prop="position_code"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <c-cascader
                            v-model="infoForm.position_code"
                            :options="assetPositionPermissionTree"
                            :placeholder="
                              tplLang('text_choose_a', ['title_loca_a'])
                            "
                          ></c-cascader>
                        </template>
                        <span>
                          {{ assetPositionMap[infoForm.position_code] }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_level_a', ':')"
                      prop="importment_level_id"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <c-select
                            v-model="infoForm.importment_level_id"
                            :options="levelList"
                            :placeholder="
                              tplLang('text_choose_a', ['title_level_a'])
                            "
                          ></c-select>
                        </template>
                        <span>
                          {{ multLang(levelMap[infoForm.importment_level_id]) }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_date_a', ':')"
                      prop="enable_time"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <c-date-picker
                            v-model="infoForm.enable_time"
                            :placeholder="
                              tplLang('text_choose_a', ['title_date_a'])
                            "
                          >
                          </c-date-picker>
                        </template>
                        <span>{{ infoForm.enable_time }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="
                        multLang('title_use_a', '(', 'title_an_d', ')', ':')
                      "
                      prop="use_year"
                    >
                      <c-form-edit :visible="infoEditVisible">
                        <template #edit>
                          <el-input
                            v-model="infoForm.use_year"
                            :placeholder="multLang('text_d')"
                          ></el-input>
                        </template>

                        <span>{{ infoForm.use_year }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col :col="11">
                    <el-form-item
                      :label="multLang('title_note_a', ':')"
                      prop="remark"
                    >
                      <c-form-edit :visible="infoEditVisible" long>
                        <template #edit>
                          <c-input-text
                            v-model="infoForm.remark"
                          ></c-input-text>
                        </template>
                        <span>
                          {{ infoForm.remark }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                </c-row>
              </el-form>
            </c-row-view>
            <c-row-view v-show="false" :title="multLang('title_ah_x')">
              <template #opn>
                <el-button type="text">
                  <c-icon name="edit"></c-icon>
                  {{ multLang('btn_edit_a') }}
                </el-button>
              </template>
              <el-form :model="specForm" ref="specForm" label-width="120px">
                <c-row :col="6">
                  <c-col>
                    <el-form-item :label="multLang('序列号', ':')">
                      <span>{{ '5201314666888' }}</span>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item :label="multLang('功率', ':')">
                      <span>{{ '300W' }}</span>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item :label="multLang('电压', ':')">
                      <span>{{ '2000V' }}</span>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item :label="multLang('转速', ':')">
                      <span>{{ '520r/min' }}</span>
                    </el-form-item>
                  </c-col>
                </c-row>
              </el-form>
            </c-row-view>
            <c-row-view :title="multLang('title_ba_v')">
              <template #opn>
                <c-row-view-opn
                  :auth="auth.isEdit"
                  :visible="procEditVisible"
                  @update:visible="visibles.proc = $event"
                  @save="procSave"
                  @cancel="procCancel"
                >
                </c-row-view-opn>
              </template>
              <el-form :model="procForm" ref="procForm" label-width="120px">
                <c-row :col="6">
                  <c-col>
                    <el-form-item
                      :label="multLang('title_date_b', ':')"
                      prop="buy_date"
                    >
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <c-date-picker
                            v-model="procForm.buy_date"
                            :placeholder="
                              tplLang('text_choose_a', ['title_date_b'])
                            "
                          >
                          </c-date-picker>
                        </template>
                        <span>{{ procForm.buy_date }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_supplier_a', ':')"
                      prop="supplier_id"
                    >
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <c-select
                            v-model="procForm.supplier_id"
                            :options="customerList"
                            :placeholder="
                              tplLang('text_choose_a', ['title_supplier_a'])
                            "
                          ></c-select>
                        </template>
                        <span>
                          {{ customerMap[procForm.supplier_id] }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item :label="multLang('title_mfr_a', ':')">
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <c-select
                            v-model="procForm.manufacturer_id"
                            :options="manufacturerList"
                            :placeholder="
                              tplLang('text_choose_a', ['title_mfr_a'])
                            "
                          ></c-select>
                        </template>
                        <span>
                          {{ manufacturerMap[procForm.manufacturer_id] }}
                        </span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_tax_a', '(%):')"
                      prop="tax_rate"
                    >
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <el-input
                            v-model="procForm.tax_rate"
                            :placeholder="multLang('text_d')"
                            @blur="handleTaxation('procForm', 'tax_rate', 100)"
                          ></el-input>
                        </template>
                        <span>{{ procForm.tax_rate }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_price_a', ':')"
                      prop="price"
                    >
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <el-input
                            v-model="procForm.price"
                            :placeholder="multLang('text_d')"
                            @blur="handleTaxation('procForm', 'price')"
                          >
                            <c-select
                              slot="prepend"
                              v-model="procForm.buy_currency_id"
                              :options="currencyList"
                            ></c-select>
                          </el-input>
                        </template>
                        <span>{{ procForm.price }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_tax_b', ':')"
                      prop="tax_price"
                    >
                      <c-form-edit :visible="procEditVisible">
                        <template #edit>
                          <el-input
                            v-model="procForm.tax_price"
                            :placeholder="multLang('text_d')"
                            @blur="toNumber('procForm', 'tax_price')"
                          >
                            <c-select
                              slot="prepend"
                              v-model="procForm.buy_currency_id"
                              :options="currencyList"
                            ></c-select>
                          </el-input>
                        </template>
                        <span>{{ procForm.tax_price }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                </c-row>
              </el-form>
            </c-row-view>
            <c-row-view :title="multLang('title_aaaab_f')">
              <template #opn>
                <c-row-view-opn
                  :auth="auth.isEdit"
                  :visible="insEditVisible"
                  @update:visible="visibles.ins = $event"
                  @save="insSave"
                  @cancel="insCancel"
                >
                </c-row-view-opn>
              </template>
              <el-form :model="insForm" ref="insForm" label-width="120px">
                <c-row :col="6">
                  <c-col>
                    <el-form-item
                      :label="multLang('title_install_b', ':')"
                      prop="install_date"
                    >
                      <c-form-edit :visible="insEditVisible">
                        <template #edit>
                          <c-date-picker
                            v-model="insForm.install_date"
                            :placeholder="
                              tplLang('text_choose_a', ['title_install_b'])
                            "
                          >
                          </c-date-picker>
                        </template>
                        <span>{{ insForm.install_date }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                  <c-col>
                    <el-form-item
                      :label="multLang('title_price_b', ':')"
                      prop="install_price"
                    >
                      <c-form-edit :visible="insEditVisible">
                        <template #edit>
                          <el-input
                            v-model="insForm.install_price"
                            :placeholder="
                              tplLang('text_choose_a', ['title_price_b'])
                            "
                            @blur="toNumber('insForm', 'install_price')"
                          >
                            <c-select
                              slot="prepend"
                              v-model="insForm.install_currency_id"
                              :options="currencyList"
                            ></c-select>
                          </el-input>
                        </template>
                        <span>{{ insForm.install_price }}</span>
                      </c-form-edit>
                    </el-form-item>
                  </c-col>
                </c-row>
              </el-form>
            </c-row-view>
          </c-roll>
        </el-tab-pane>
        <el-tab-pane
          :label="multLang('tab_fault_a')"
          name="2"
          v-if="auth.isFault"
        >
          <c-eqpt-list-view-fault
            ref="faultView"
            :data="data.fault"
          ></c-eqpt-list-view-fault>
        </el-tab-pane>
        <el-tab-pane :label="multLang('tab_doc_a')" name="3" v-if="auth.isDoc">
          <c-eqpt-list-view-doc
            ref="docView"
            :info="info"
            :data="data.doc"
            @query="updateDoc"
            :auth="docAuth"
          ></c-eqpt-list-view-doc>
        </el-tab-pane>
        <el-tab-pane :label="multLang('tab_log_a')" name="4" v-if="auth.isLog">
          <c-roll>
            <c-eqpt-list-view-log :data="data.log"></c-eqpt-list-view-log>
          </c-roll>
        </el-tab-pane>
      </c-tabs>
      <template #right>
        <c-tabs value="1">
          <el-tab-pane :label="multLang('tab_work_a')" name="1">
            <c-roll>
              <c-eqpt-list-view-work-next
                :data="data.work"
              ></c-eqpt-list-view-work-next>
            </c-roll>
          </el-tab-pane>
          <el-tab-pane :label="multLang('tab_work_b')" name="2">
            <c-roll>
              <c-eqpt-list-view-work-history
                :data="data.history"
              ></c-eqpt-list-view-work-history>
            </c-roll>
          </el-tab-pane>
        </c-tabs>
      </template>
    </c-eqpt-list-view-body>
  </div>
</template>
<script>
import CEqptListViewHead from './mod/ViewHead.vue'
import CEqptListViewBody from './mod/ViewBody.vue'
import CEqptListViewFault from './mod/ViewFault.vue'
import CEqptListViewDoc from './mod/ViewDoc.vue'
import CEqptListViewLog from './mod/ViewLog.vue'
import CEqptListViewWorkNext from './mod/ViewWorkNext.vue'
import CEqptListViewWorkHistory from './mod/ViewWorkHistory.vue'
import {
  editAsset,
  getAssetDocData,
  getAssetFaultData,
  getAssetHistoryWorkData,
  getAssetInfo,
  getAssetLogData,
  getAssetNextWorkData
} from '@api/eqpt'
import { IsArray, ObjectCopy } from '@/util'
import { getImg, getQRCode, upload } from '@/http/api/v1/file'
import { tplLang } from '@/util/store'
import { normalData } from '@/util/data'
import { closeTag } from '@/util/router'

const handleLog = data =>
  data.reduce((arr, { create_time, create_user_name, remark }) => {
    const obj = {
      create_time,
      create_user_name,
      remark: []
    }
    const log = JSON.parse(remark)
    IsArray(log) &&
      log.forEach(({ key, params }) => {
        obj.remark.push(tplLang(key, params))
      })
    arr.push(obj)

    return arr
  }, [])

export default {
  name: 'VEqptListView',
  components: {
    CEqptListViewHead,
    CEqptListViewBody,
    CEqptListViewFault,
    CEqptListViewDoc,
    CEqptListViewLog,
    CEqptListViewWorkNext,
    CEqptListViewWorkHistory
  },
  props: {},
  data() {
    return {
      positionCodeTree: [],
      assetModelAllList: [],
      visibles: {
        edit: false,
        base: false,
        info: false,
        spec: false,
        proc: false,
        ins: false
      },
      iconForm: { sectionType: 'assetIcon', asset_icon: '' },
      baseForm: {
        sectionType: 'assetTop',
        asset_name: '',
        asset_code: '',
        running_status_id: '',
        status: '',
        guarantee_status_id: ''
      },
      infoForm: {
        sectionType: 'assetBase',
        category_id: '',
        asset_model_id: '',
        position_code: '',
        importment_level_id: '',
        enable_time: '',
        use_year: '',
        remark: ''
      },
      specForm: {},
      procForm: {
        sectionType: 'assetBuy',
        buy_date: '',
        supplier_id: '',
        manufacturer_id: '',
        tax_rate: '',
        price: '',
        tax_price: '',
        buy_currency_id: ''
      },
      insForm: {
        sectionType: 'assetInstall',
        install_date: '',
        install_price: '',
        install_currency_id: ''
      },
      info: {},
      data: {
        fault: [],
        doc: [],
        log: [],
        work: [],
        history: []
      },
      auth: {
        isEdit: false,
        isDoc: false,
        isFault: false,
        isLog: false
      },
      docAuth: {
        isAdd: false,
        isDelete: false,
        isDownload: false
      },
      id: ''
    }
  },
  computed: {
    assetStatusList() {
      return this.optionList('asset_status')
    },
    assetInfoStatusList() {
      return this.optionList('asset_info_status')
    },
    warrantiesTypeList() {
      return this.optionList('warranties_type')
    },
    assetPositionPermissionTree() {
      return this.optionTree('asset_position_permission')
    },
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    levelList() {
      return this.optionList('level')
    },
    currencyList() {
      return this.optionList('currency')
    },
    customerList() {
      return this.optionList('customer')
    },
    manufacturerList() {
      return this.optionList('manufacturer')
    },

    assetStatusMap() {
      return this.optionMap('asset_status')
    },
    assetInfoStatusMap() {
      return this.optionMap('asset_info_status')
    },
    warrantiesTypeMap() {
      return this.optionMap('warranties_type')
    },
    assetPositionMap() {
      return this.optionMap('asset_position')
    },
    assetTypeAllMap() {
      return this.optionMap('asset_type_all')
    },
    assetModelAllMap() {
      return this.optionMap('asset_model_all')
    },
    levelMap() {
      return this.optionMap('level')
    },
    currencyMap() {
      return this.optionMap('currency')
    },
    customerMap() {
      return this.optionMap('customer')
    },
    manufacturerMap() {
      return this.optionMap('manufacturer')
    },

    eqptImg() {
      return getImg(this.iconForm.asset_icon)
    },
    eqptQRcode() {
      return getQRCode(this.id)
    },
    baseRules() {
      return {
        asset_name: {
          required: true,
          message: this.multLang('title_asset_a', 'msg_g'),
          trigger: 'blur'
        },
        asset_code: {
          required: true,
          message: this.multLang('title_asset_ae', 'msg_g'),
          trigger: 'blur'
        },

        running_status_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_status_a']),
          trigger: 'change'
        },
        status: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_status_b']),
          trigger: 'change'
        },
        guarantee_status_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_status_c']),
          trigger: 'change'
        }
      }
    },
    infoRules() {
      return {
        category_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_asset_c']),
          trigger: 'change'
        },
        asset_model_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_asset_d']),
          trigger: 'change'
        },
        position_code: {
          required: true,
          message: this.multLang('title_loca_a', 'msg_g'),
          trigger: 'change'
        }
      }
    },
    procRules() {
      return {}
    },
    insRules() {
      return {}
    },
    baseEditVisible() {
      return this.auth.isEdit && this.visibles.base
    },
    infoEditVisible() {
      return this.auth.isEdit && this.visibles.info
    },
    procEditVisible() {
      return this.auth.isEdit && this.visibles.proc
    },
    insEditVisible() {
      return this.auth.isEdit && this.visibles.ins
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'asset_position' })
    this.setOption({ key: 'asset_type_all' })
    this.setOption({ key: 'asset_model_all' })

    this.setOption({ key: 'asset_status' })
    this.setOption({ key: 'asset_info_status' })
    this.setOption({ key: 'warranties_type' })

    this.setOption({ key: 'level' })
    this.setOption({ key: 'currency' })

    this.setOption({ key: 'customer' })
    this.setOption({ key: 'manufacturer' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const {
      name,
      params: { id, edit, auth, docAuth }
    } = this.$route

    auth && ObjectCopy(this.auth, auth)
    docAuth && ObjectCopy(this.docAuth, docAuth)

    const cacheid = id || this.id
    if (cacheid) {
      this.id = cacheid
      this.query()
    } else {
      closeTag(name)
    }

    typeof edit === 'boolean' && (this.visibles.base = edit)
    if (edit) {
      this.visibles.base = false
      this.visibles.info = false
      this.visibles.spec = false
      this.visibles.proc = false
      this.visibles.ins = false
    }
    this.setOption({ key: 'asset_position_permission' })
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    tabClick() {
      this.$refs.faultView.refreshTable()
      this.$refs.docView.refreshTable()
    },
    handleTaxation(form, ...args) {
      this.toNumber(form, ...args)
      const { tax_rate, price } = this[form]
      if (tax_rate && price) {
        this[form].tax_price = (tax_rate * price) / 100
        this.toNumber(form, 'tax_price')
      }
    },
    toNumber(form, name, max) {
      const num = max && this[form][name] > max ? max : this[form][name]
      const val = Math.round(num * 100) / 100
      this[form][name] = val ? val.toFixed(2) : ''
    },
    query() {
      this.queryInfo()
      this.queryFault()
      this.queryDoc()
      this.queryLog()
      this.queryWork()
      this.queryHistory()
    },
    copyData(data, raw) {
      return ObjectCopy(data, raw, {
        skip: 'sectionType'
      })
    },
    iconFormChange(files) {
      upload({ files }).then(({ data }) => {
        this.iconForm.asset_icon = data || ''
        editAsset({ id: this.id, ...this.iconForm }).then(() => {
          this.queryInfo()
          this.queryLog()
        })
      })
    },
    baseSave() {
      this.$refs.baseForm.validate(
        valid =>
          valid &&
          editAsset({ id: this.id, ...this.baseForm }).then(() => {
            this.visibles.base = false
            this.queryInfo()
            this.queryLog()
          })
      )
    },
    baseCancel() {
      this.copyData(this.baseForm, this.info)
      this.visibles.base = false
      this.$nextTick().then(() => this.$refs.baseForm.clearValidate())
    },
    infoSave() {
      this.$refs.infoForm.validate(
        valid =>
          valid &&
          editAsset({ id: this.id, ...this.infoForm }).then(() => {
            this.visibles.info = false
            this.queryInfo()
            this.queryLog()
          })
      )
    },
    infoCancel() {
      this.copyData(this.infoForm, this.info)
      this.visibles.info = false
      this.$nextTick().then(() => this.$refs.infoForm.clearValidate())
    },
    procSave() {
      this.$refs.procForm.validate(
        valid =>
          valid &&
          editAsset({ id: this.id, ...this.procForm }).then(() => {
            this.visibles.proc = false
            this.queryInfo()
            this.queryLog()
          })
      )
    },
    procCancel() {
      this.copyData(this.procForm, this.info)
      this.visibles.proc = false
      this.$nextTick().then(() => this.$refs.procForm.clearValidate())
    },
    insSave() {
      this.$refs.insForm.validate(
        valid =>
          valid &&
          editAsset({ id: this.id, ...this.insForm }).then(() => {
            this.visibles.ins = false
            this.queryInfo()
            this.queryLog()
          })
      )
    },
    insCancel() {
      this.copyData(this.insForm, this.info)
      this.visibles.ins = false
      this.$nextTick().then(() => this.$refs.insForm.clearValidate())
    },
    queryInfo() {
      const { id } = this
      getAssetInfo({ id }).then(({ data }) => {
        this.info = data || {}
        this.copyData(this.iconForm, data)
        this.copyData(this.baseForm, data)
        this.copyData(this.infoForm, data)
        this.copyData(this.procForm, data)
        this.copyData(this.insForm, data)
      })
    },
    queryFault() {
      const { id } = this
      this.auth.isFault &&
        id &&
        getAssetFaultData({ id }).then(
          ({ data }) => data && (this.data.fault = data)
        )
    },
    updateDoc() {
      this.queryDoc()
      this.queryLog()
    },
    queryDoc() {
      const { id } = this
      this.auth.isDoc &&
        id &&
        getAssetDocData({ id }).then(
          ({ data }) => data && (this.data.doc = data)
        )
    },
    queryLog() {
      const { id } = this
      this.auth.isLog &&
        id &&
        getAssetLogData({ id }).then(
          ({ data }) => data && (this.data.log = handleLog(data))
        )
    },
    queryWork() {
      const { id } = this
      id &&
        getAssetNextWorkData({ id }).then(
          ({ data }) => data && (this.data.work = data)
        )
    },
    queryHistory() {
      const { id } = this
      id &&
        getAssetHistoryWorkData({ id }).then(
          ({ data }) => data && (this.data.history = data)
        )
    },
    changeAssetModelAllList(id) {
      this.infoForm.asset_model_id = ''
      this.getEqptModelList(id)
    },
    getEqptModelList(id) {
      this.setOption({
        key: 'asset_model_category',
        out: true,
        option: {
          id
        }
      }).then(data => (this.assetModelAllList = normalData(data || [])))
    }
  }
}
</script>
<style lang="scss">
.v-eqpt-list-view {
  &-img {
    position: relative;
    .el-image {
      @include wh(80px, 80px);
    }
    .c-img {
      @include wh(80px, 80px);
    }
    .c-upload-single {
      width: 80px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #9bccff;
      cursor: pointer;
    }
  }
}
</style>
